<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="./css/article.css">
    <link rel="stylesheet" href="./css/markdown-style.css">
    <link rel="stylesheet" href="./css/default.min.css">

    <script src="./js/marked.js"></script>
    <script src="./js/highlight.min.js"></script>
    <style>

    </style>
    <title>Article</title>
</head>

<body>
    <header>
        <nav class="nav-top top-show">
            <div id="logo">
                <a href="./index.html">
                    暗天使
                </a>
            </div>
            <div class="menu">
                <i class="iconfont icon-menu"></i>
            </div>
            <div class="nav">
                <a href="index.html" class="item">首页</a>
                <a href="./list.html" class="item">文章</a>
                <a href="./archives.html" class="item">足迹</a>
                <a href="./links.html" class="item">友链</a>
                <a href="about.html" class="item">关于</a>
            </div>
            <div class="search">
                <a href="#">
                    <i class="iconfont icon-31sousuo"></i>
                    <!-- <img src="./img/icon/搜索_填充.png" alt=""> -->
                </a>
                <div class="search-box ">
                    <div class="quit">
                        <a href="#">
                            关闭
                        </a>
                    </div>
                    <form action="./search.html">
                        <input required type="text" name="q" id="" placeholder="想要找点什么呢？">
                        <input type="submit" value="搜索">
                    </form>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="box">
                <div class="h1">2222222222223333333333</div>
                <div class="info">2021年11月11日 - 1000 - 100</div>
            </div>
        </div>
    </header>

    <main class="container">
        <article id="article">
        </article>

        <div class="comment">
            <div class="title">
                <b>留下一条友善的评论</b>
            </div>
            <div class="send-comment">
                <form action="">
                    <div class="info">
                        <div class="item">
                            <input type="text" placeholder="昵称（必填）" required>
                        </div>
                        <div class="item">
                            <input type="text" placeholder="邮箱（必填）">
                        </div>
                        <div class="item">
                            <input type="text" placeholder="网址（选填）">
                        </div>
                    </div>
                    <div class="content">
                        <textarea name="" id="" cols="30" rows="10"></textarea>
                    </div>
                    <div class="comment-submit">
                        <input type="submit" name="" id="">
                    </div>
                </form>
            </div>
            <div class="show-comment">
                <div class="comment-item">
                    <div class="comment-info">
                        <div class="profile">
                            <a href="#">
                                <img src="./img/logo.jpg" alt="">
                            </a>
                        </div>
                        <div class="name">
                            <a href="#">
                                邪王暗焰
                            </a>
                        </div>
                        <div class="reply">
                            <a href="#">
                                回复
                            </a>
                        </div>
                        <div class="info">
                            发布于 6 天前  (  Google Chrome 76.0.3809.89   Android 10 ) 来自: 广东省中山市 联通
                        </div>
                    </div>
                    <div class="comment-body">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores fugit quisquam maxime corrupti
                        quis sed quam tempora, temporibus voluptatibus, aut sequi, repellendus tempore suscipit
                        blanditiis debitis accusamus cupiditate at similique?
                    </div>
                </div>
                <div class="comment-item">
                    <div class="comment-info">
                        <div class="profile">
                            <a href="#">
                                <img src="./img/logo.jpg" alt="">
                            </a>
                        </div>
                        <div class="name">
                            <a href="#">
                                邪王暗焰
                            </a>
                        </div>
                        <div class="reply">
                            <a href="#">
                                回复
                            </a>
                        </div>
                        <div class="info">
                            发布于 6 天前  (  Google Chrome 76.0.3809.89   Android 10 ) 来自: 广东省中山市 联通
                        </div>
                    </div>
                    <div class="comment-body">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores fugit quisquam maxime corrupti
                        quis sed quam tempora, temporibus voluptatibus, aut sequi, repellendus tempore suscipit
                        blanditiis debitis accusamus cupiditate at similique?
                    </div>
                    <div class="children">
                        <div class="comment-item">
                            <div class="comment-info">
                                <div class="profile">
                                    <a href="#">
                                        <img src="./img/0.jpg" alt="">
                                    </a>
                                </div>
                                <div class="name">
                                    <a href="#">
                                        邪王暗焰
                                    </a>
                                </div>
                                <div class="reply">
                                    <a href="#">
                                        回复
                                    </a>
                                </div>
                                <div class="info">
                                    发布于 6 天前  (  Google Chrome 76.0.3809.89   Android 10 ) 来自: 广东省中山市 联通
                                </div>
                            </div>
                            <div class="comment-body">
                                <a href="javascript:;" class="comment-at">@邪王暗焰</a>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores fugit quisquam maxime
                                corrupti
                                quis sed quam tempora, temporibus voluptatibus, aut sequi, repellendus tempore suscipit
                                blanditiis debitis accusamus cupiditate at similique?
                            </div>
                        </div>
                    </div>
                </div>
                <div class="comment-item">
                    <div class="comment-info">
                        <div class="profile">
                            <a href="#">
                                <img src="./img/aaa.jpg" alt="">
                            </a>
                        </div>
                        <div class="name">
                            <a href="#">
                                邪王暗焰
                            </a>
                        </div>
                        <div class="reply">
                            <a href="#">
                                回复
                            </a>
                        </div>
                        <div class="info">
                            发布于 6 天前  (  Google Chrome 76.0.3809.89   Android 10 ) 来自: 广东省中山市 联通
                        </div>
                    </div>
                    <div class="comment-body">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores fugit quisquam maxime corrupti
                        quis sed quam tempora, temporibus voluptatibus, aut sequi, repellendus tempore suscipit
                        blanditiis debitis accusamus cupiditate at similique?
                    </div>
                </div>
                <div class="comment-item">
                    <div class="comment-info">
                        <div class="profile">
                            <a href="#">
                                <img src="./img/0.jpg" alt="">
                            </a>
                        </div>
                        <div class="name">
                            <a href="#">
                                邪王暗焰
                            </a>
                        </div>
                        <div class="reply">
                            <a href="#">
                                回复
                            </a>
                        </div>
                        <div class="info">
                            发布于 6 天前  (  Google Chrome 76.0.3809.89   Android 10 ) 来自: 广东省中山市 联通
                        </div>
                    </div>
                    <div class="comment-body">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores fugit quisquam maxime corrupti
                        quis sed quam tempora, temporibus voluptatibus, aut sequi, repellendus tempore suscipit
                        blanditiis debitis accusamus cupiditate at similique?
                    </div>

                </div>
            </div>
        </div>
        <footer>
            footer Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, distinctio commodi?
            Voluptatem
            asperiores dicta, excepturi corporis r molestiae iste veniam tempore sint odio,
            <br>
            corrupti ipsa. Harum, inventore.
        </footer>
        <div id="cd-top">
            <img src="./img/f.png" alt="">
        </div>
    </main>

    <script src="./js/main.js"></script>
    <script>
        let xhr = new XMLHttpRequest()
        xhr.open('get', './README.md', false)
        xhr.send(null)

        let content = xhr.responseText
        let article = document.getElementById('article')
        article.innerHTML += marked.parse(content);
        console.log(marked.parse(content));
        hljs.highlightAll();
    </script>
</body>

</html>